<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<div class="panel panel-default" >
    <div class="panel-heading" >
        Bekijk details van een klant
    </div>
    <c:if test="${not empty customer}">
    <div class="container-fluid">
        <div class="row">
            <div class="row">
                <div class="form-group">
                    <label class="col-md-2 control-label"><spring:message code="customer.firstname_lbl"/></label>
                    <div class="col-md-2">
                        <input class="form-control" type='text' value="${customer.surname}" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label"><spring:message code="customer.lastname_lbl"/></label>
                    <div class="col-md-2">
                        <input class="form-control" type='text' value="${customer.lastname}" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-2 control-label"><spring:message code="customer.address_lbl"/></label>
                    <div class="col-md-2">
                        <input class="form-control" type='text' value="${customer.streetAddress}" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label"><spring:message code="customer.housenumber_lbl"/></label>
                    <div class="col-md-2">
                        <input class="form-control" type='text' value="${customer.houseNumber}" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-2 control-label"><spring:message code="customer.postalcode_lbl"/></label>
                    <div class="col-md-2">
                        <input class="form-control" type='text' value="${customer.postalCode}" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label"><spring:message code="city_lbl"/></label>
                    <div class="col-md-2">
                        <input class="form-control" type='text' value="${customer.city}" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-2 control-label"><spring:message code="customer.birthdate_lbl"/></label>
                    <div class="col-md-2">
                        <form:input path="customer.birthdate" id="test" data-role="datepicker" data-bind="format:dd-MM-yyyy, value: selectedDate, events: {onchange: onchange}"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label"><spring:message code="customer.phonenumber_lbl"/></label>
                    <div class="col-md-2">
                        <input class="form-control" type='text' value="${customer.telephone1}" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-2 control-label"><spring:message code="customer.emailaddress_lbl"/></label>
                    <div class="col-md-2">
                        <input class="form-control" type='text' value="${customer.email}" />
                    </div>
                </div>
            </div>
            <h5><a href="${pageContext.request.contextPath}/customer/findbookings/${customer.id}">Bekijk de boekingen</a></h5>
        </div>
    </div>
    </c:if>
    <c:if test="${empty customer}">
        <h5><a href="${pageContext.request.contextPath}/customer/index">Selecteer eerst een klant</a></h5>
    </c:if> 
</div>
<script>
    var viewModel = kendo.observable({
        selectedDate: null,
        onchange: onchange
    });
    kendo.bind($("#test"), viewModel);

    function onchange(e) {
        viewModel.set("selectedDate", e.target.value);
    }
</script>
